<template>
    <div class="index">
        <div class="in">
            <!-- 头部 -->
            <div>
                <div class="box"></div>
                <span>待处理签约</span>
            </div>

            <!-- 行内表单1 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline locationt">

                <el-form-item label="签约状态">
                    <el-select v-model="formInline.region1" placeholder="请选择">
                        <el-option label="请选择" value="choose" />
                        <el-option label="待审核" value="daishenhe" />
                        <el-option label="待支付" value="daizhifu" />
                        <el-option label="已驳回" value="yibohui" />
                    </el-select>
                </el-form-item>
                <el-form-item label="签约机构">
                    <el-select v-model="formInline.region2" placeholder="请选择">
                        <el-option label="请选择" value="choose" />
                        <el-option label="罗西社区服务中心" value="luoxi" />
                        <el-option label="天明社区服务中心" value="tianming" />
                        <el-option label="民进社区服务中心" value="minjin" />
                    </el-select>
                </el-form-item>
                <el-form-item label="医生团队">
                    <el-select v-model="formInline.region3" placeholder="请选择">
                        <el-option label="请选择" value="choose" />
                        <el-option label="王皓团队" value="wanghao" />
                        <el-option label="胡曼团队" value="human" />
                        <el-option label="李维团队" value="liwei" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" plain>导出</el-button>
                </el-form-item>
            </el-form>

            <!-- 行内表单2 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline locationb">
                <el-form-item label="服务包">
                    <el-select v-model="formInline.region4" placeholder="请选择">
                        <el-option label="请选择" value="choose" />
                        <el-option label="基础包" value="jichubao" />
                        <el-option label="老年人服务包" value="laonianren" />
                        <el-option label="慢性病护理包" value="manxingbing" />
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <!-- 日期选择 -->
                    <div class="block">
                        <span class="demonstration font">选择日期 </span>
                        <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="~"
                            start-placeholder="请选择日期" end-placeholder="请选择日期" :shortcuts="shortcuts" :size="size" />
                    </div>
                </el-form-item>

                <el-form-item>
                    <!-- 搜索框 -->
                    <el-input v-model="input1" class="w-50 m-2 input" size="large" placeholder="请输入关键字"
                        :suffix-icon="Search" />
                </el-form-item>
            </el-form>

            <!-- table -->
            <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" stripe
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column property="id" label="编号" width="120" />
                <el-table-column property="name" label="签约人姓名" width="120" />
                <el-table-column property="idNo" label="身份证号" width="180" />
                <el-table-column property="phone" label="手机号码" width="130" />
                <el-table-column property="team" label="签约医生团队" width="120" />
                <el-table-column property="who" label="签约医生" width="120" />
                <el-table-column property="service" label="服务包" width="120" />
                <el-table-column property="state" label="签约状态" width="120" />
                <el-table-column label="到期时间" width="120">
                    <template #default="scope">{{ scope.row.date }}</template>
                </el-table-column>

                <el-table-column label="操作" width="120">
                    <template #default>
                        <el-button link type="primary" size="small" @click="handleClick">查看详情</el-button>
                        <el-button link type="primary" size="small" @click="handleEdit">续约</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- bottom -->
            <div>
                <el-config-provider :locale="locale">
                    <el-pagination :total="1000" background class="page" />
                </el-config-provider>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import router from '../../../router'
import { reactive } from 'vue'
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { computed } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const formInline = reactive({
    region1: '',
    region2: '',
    region3: '',
    region4: '',
})

const onSubmit = () => {
    console.log('submit!')
}

const value2 = ref('')
const shortcuts = [
    {
        text: '最近一周',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: '最近一个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: '最近三个月',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]
const size = ref<'' | 'large' | 'small'>('')


// table
interface User {
    id: string,
    name: string,
    idNo: string,
    phone: string,
    team: string,
    who: string,
    service: string,
    state: string,
    date: string,
    handle: string
}

const handleClick = () => {
    router.push('/recontract/redetail')
}
const handleEdit = () => {
    router.push('/recontract/reedit')
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val
}

const tableData: User[] = [
    {
        id: '201434001',
        name: '王安然',
        idNo: '371456198908090543',
        phone: '188641368888',
        team: '李明明团队',
        who: '李明明',
        service: '老年人服务包',
        state: '未生效',
        date: '2016-05-03',
        handle: '事件'
    },
    {
        id: '201434001',
        name: '王安然',
        idNo: '371456198908090543',
        phone: '188641368888',
        team: '李明明团队',
        who: '李明明',
        service: '老年人服务包',
        state: '未生效',
        date: '2016-05-03',
        handle: '事件'
    },
    {
        id: '201434001',
        name: '王安然',
        idNo: '371456198908090543',
        phone: '188641368888',
        team: '李明明团队',
        who: '李明明',
        service: '老年人服务包',
        state: '未生效',
        date: '2016-05-03',
        handle: '事件'
    },
    {
        id: '201434001',
        name: '王安然',
        idNo: '371456198908090543',
        phone: '188641368888',
        team: '李明明团队',
        who: '李明明',
        service: '老年人服务包',
        state: '未生效',
        date: '2016-05-03',
        handle: '事件'
    },
    {
        id: '201434001',
        name: '王安然',
        idNo: '371456198908090543',
        phone: '188641368888',
        team: '李明明团队',
        who: '李明明',
        service: '老年人服务包',
        state: '未生效',
        date: '2016-05-03',
        handle: '事件'
    },
    {
        id: '201434001',
        name: '王安然',
        idNo: '371456198908090543',
        phone: '188641368888',
        team: '李明明团队',
        who: '李明明',
        service: '老年人服务包',
        state: '未生效',
        date: '2016-05-03',
        handle: '事件'
    },
    {
        id: '201434001',
        name: '王安然',
        idNo: '371456198908090543',
        phone: '188641368888',
        team: '李明明团队',
        who: '李明明',
        service: '老年人服务包',
        state: '未生效',
        date: '2016-05-03',
        handle: '事件'
    },
    {
        id: '201434001',
        name: '王安然',
        idNo: '371456198908090543',
        phone: '188641368888',
        team: '李明明团队',
        who: '李明明',
        service: '老年人服务包',
        state: '未生效',
        date: '2016-05-03',
        handle: '事件'
    },
    {
        id: '201434001',
        name: '王安然',
        idNo: '371456198908090543',
        phone: '188641368888',
        team: '李明明团队',
        who: '李明明',
        service: '老年人服务包',
        state: '未生效',
        date: '2016-05-03',
        handle: '事件'
    },
    {
        id: '201434001',
        name: '王安然',
        idNo: '371456198908090543',
        phone: '188641368888',
        team: '李明明团队',
        who: '李明明',
        service: '老年人服务包',
        state: '未生效',
        date: '2016-05-03',
        handle: '事件'
    }


]

const input1 = ref('')

const language = ref('zh-cn')
const locale = computed(() => (language.value === 'zh-cn' ? zhCn : ''))





</script>

<style scoped>
.index {
    padding: 0 60px;
    background-color: rgb(242, 247, 251);

}


.in {
    background-color: rgb(255, 255, 255);
    min-width: 800px;
    padding: 20px;
}

.box {
    display: inline-block;
    width: 6px;
    height: 20px;
    background-color: rgba(41, 132, 248, 1);
    border-radius: 8px;
    margin-right: 10px;


}

.box1 {
    display: flex;
}

.btn {
    margin-top: 14px;
    margin-left: 80px;
}

.locationt {
    margin-top: 20px;
    margin-left: 16px;
}
.locationb {
    margin-left: 16px;
}
.input {
    width: 400px;
    height: 32px;
    margin-top: 14px;
    margin-left: 20px;
}

.box2 {
    display: flex;
}

.block {
    margin-top: 14px;
}

.font {
    font-size: 14px;
    color: rgb(153, 153, 153);
}

.page {
    margin-top: 20px;
    margin-left: 500px;
}

.example-block {
    margin: 1rem;
}

.example-demonstration {
    margin: 1rem;
}
</style>

